<template>
    <div>
        <h2>房型添加</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房号</td>
                    <td>
                        <select v-model="queryInfo.Code">
                            <option value="">请选择</option>
                            <option :value="item.Name" v-for="item in aa.data" :key="item.Id">{{item.Name}}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>房型名称</td>
                    <td>
                        <input type="text" v-model="queryInfo.Name">
                    </td>
                </tr>

                <tr>
                    <td>大小</td>
                    <td>
                        <input type="text" v-model="queryInfo.Area">
                    </td>
                </tr>

                <tr>
                    <td>房型图片</td>
                    <td>
                        <input type="file"  @change="img">
                        <img :src="queryInfo.Photo" height="100" width="100" v-if="queryInfo.Photo!=''" alt="">
                    </td>
                </tr>

                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" name="state" :value="0" v-model="queryInfo.State">投放
                        <input type="radio" name="state" :value="1" v-model="queryInfo.State">未投放
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-info" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();
import moment from 'moment'

//--------下拉-----------
onMounted(()=>{
    getBang();
})
let aa:any=reactive({
    data:[]
})

const getBang=()=>{
    axios({
        method:'get',
        url:'/api/House/ShowCode'
    })
    .then(res=>{
        console.log(res);
        aa.data=res.data;
    })
    .catch(err=>{
        console.log(err);
    })

}

let queryInfo=reactive({
  "Code": "",
  "Name": "",
  "Area": '',
  "Photo": "",
  "State": '',
})

//图片上传
const img=(e:any)=>{
    var obj=e.target.files[0];
    var f=new FormData();
    f.append('file',obj);

    axios({
        method:'post',
        url:'/api/House/UpFile',
        data:f
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('图片格式不正确');
            return;
        }
        if(res.data==-2){
            alert('图片大小超过2M');
            return;
        }
        queryInfo.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const ok=()=>{
    //返回网络请求
    axios({
        method:'post',
        url:'/api/House/AddHouse',
        data:queryInfo
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('房型名称不能重复');
            return;
        }
        if(res.data>0){
            alert('成功');
            router.push('/')
        }
        else{
            alert('失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>